/**
 * 封装全局公用的钩子方法,页面逻辑相关的
 */
import { ref, onUnmounted } from 'vue'
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'

// 组件数据懒加载，第一次渲染时，只有进入视口才发送ajax请求（进入视口，拖动长屏页面至用户可见）
// 作用：提高页面渲染能力，减轻服务器压力
// 监听视口，使用vueuse
// 可以监听DOM，自定义组件
/**
 *
 * @param {*} apiFn 该请求需要传入的参数，callback回调函数
 */
// 监控元素是否进入可视区
export const useObserver = (apiFn) => {
  const target = ref(null)

  // 该函数 useIntersectionObserver 会一直执行，每次进入退出都会返回值
  const { stop } = useIntersectionObserver(
    target, // 要监控的组件
    // [{ isIntersecting }]
    // 数组解构，解构时命名为null会报错，
    // 为空，为undefined就可以可以
    ([{ isIntersecting }]) => {
      // isIntersecting:组件或者元素是否进入可视区--返回true或者false
      // console.log(isIntersecting)

      // 解决根据视口内容的变化一直监听，一直执行函数的问题
      // 进入视口之后，发送某请求，不再执行函数
      if (isIntersecting) {
        apiFn()

        stop()// 关闭监听
      }
    },
    {
      threshold: 0// 目标元素在视口显示的大小-0，刚出现就可以监听到
    }
  )

  return { target }
}

/**
 *
 * @param {*} time 倒计时的时间
 */
export function useCountDown (time) {
  const count = ref(0)
  const { pause, resume } = useIntervalFn(() => {
    count.value--
    if (count.value <= 0) {
      pause()
    }
  }, 1000, {
    immediate: false// 可以自己控制是否立即倒计时
  })

  // 倒计时为零时，重置时间
  const start = () => {
    if (count.value === 0) {
      count.value = time
    }
    resume()
  }

  // 组件销毁时，清除定时器
  onUnmounted(() => {
    pause()
  })

  return { pause, start, count }
}
